import Vue from 'vue'
import App from './App'

// 1.导入axios
import axios from "axios"

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

// 2.使用axios
axios({
  url: 'http://httpbin.org/get',
  method: 'get'
}).then(res => {
  console.log(res);
})

axios({
  url: 'http://httpbin.org/get?type=pop&page=1',
  method: 'get',
}).then(res => {
  console.log(res);
})

axios({
  url: 'http://httpbin.org/get',
  method: 'get',
  // 专门针对get请求的参数拼接
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})

// axios的全局配置
axios.defaults.baseURL = 'http://httpbin.org'
axios.defaults.timeout = 5000 // 超时毫秒

// axios发送并发请求
axios.all(
  // 第一个请求
  [axios({
    url: '/get' // 由于配置了axios.defaults.url 所以公共部分可以省略不写
  }),
  // 第二个请求
  axios({
    url: '/get',
    params: {
      type: 'pop',
      page: 1
    }
  })]
).then(res => {
  console.log(res)
})

axios.all(
  // 第一个请求
  [axios({
    url: '/get'
  }),
  // 第二个请求
  axios({
    url: '/get',
    params: {
      type: 'pop',
      page: 1
    }
  })]
).then(axios.spread((res1, res2) => { // axios.spread将并发请求结果的集合分割，应该是数组的解构
  console.log(res1)
  console.log(res2)
}))

// axios的实例，不同的业务需求可以使用不同的axios实例
const axios1 = axios.create({ // 第一个实例
  baseURL: 'http://127.0.0.1:8081',
  timeout: 5000
})
const axios2 = axios.create({ // 第二个实例
  baseURL: 'http://127.0.0.1:8082',
  timeout: 8000
})

// 使用封装的网络请求模块
import { request, request1, request2, request3 } from "./network/request" // 由于不是导入的默认导出，所以需要用{ request }方式精确要导入的模块
request({
  url: '/get'
}, res => {
  console.log('使用封装的网络请求模块，请求返回成功');
  console.log(res) // 打印网络请求结果
}, err => {
  console.log(err);
})
// 使用封装的网络请求模块1
request1({
  baseConfig: {
    url: '/get'
  },
  success: function (res) {
    console.log('使用封装的网络请求模块1，请求返回成功');
    console.log(res) // 打印网络请求结果
  },
  failure: function (err) {
    console.log(err);
  }
})
// 使用封装的网络请求模块2
request2({
  url: '/get'
}).then(res => {
  console.log('使用封装的网络请求模块2，请求返回成功');
  console.log(res) // 打印网络请求结果
}).catch(err => {
  console.log(err);
})
// 使用封装的网络请求模块3
// 视频中说：由于axios的实例，本身就是一个Promise，所以直接返回实例就可以了。但实际测试发现这种方式不行，可能由于axios版本问题，已经不是返回Promise了
request3({
  url: '/get'
}).then(res => {
  console.log('使用封装的网络请求模块3，请求返回成功');
  console.log(res) // 打印网络请求结果
}).catch(err => {
  console.log(err);
})